import React from 'react';
import 'antd/dist/antd.css';

import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';

export default class Chart extends React.Component {
    componentDidMount() {
        var mySource = echarts.init(document.getElementById('source'));
        var myTopic = echarts.init(document.getElementById('topic'));

        mySource.setOption({
            title: {
                //标题设置‘参保情况’
                x: 'left', //标题位置
                text: '来源情况', //传入标题名称‘参保情况’
                textStyle: {
                    //标题字体颜色等设置
                    fontSize: 16,
                    fontWeight: 'bold'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                itemGap: 2,
                show: true,
                orient: 'vertical',
                x: 'left',
                y: '10%',
                data: ['新闻客户端', '新闻网站', '微博', '微信', '论坛']
            },
            series: [
                {
                    name: '来源情况',
                    type: 'pie',
                    radius: ['30%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '15',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {},
                    data: [
                        { value: 335, name: '微博' },
                        { value: 310, name: '微信' },
                        { value: 234, name: '论坛' },
                        { value: 135, name: '新闻客户端' },
                        { value: 1548, name: '新闻网站' }
                    ]
                }
            ]
        });

        myTopic.setOption({
            title: {
                //标题设置‘参保情况’
                x: 'left', //标题位置
                text: '话题热度', //传入标题名称‘参保情况’
                textStyle: {
                    //标题字体颜色等设置
                    fontSize: 16,
                    fontWeight: 'bold'
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    areaStyle: {},
                    smooth: true
                }
            ]
        });
    }
    render() {
        return (
            <div style={{ float: 'right' }}>
                <div
                    style={{
                        float: 'right',
                        width: '290px',
                        height: '250px',
                        backgroundColor: 'white'
                    }}
                    id="source"
                />
                <div
                    style={{
                        float: 'right',
                        width: '290px',
                        height: '290px',
                        backgroundColor: 'white'
                    }}
                    id="topic"
                />
            </div>
        );
    }
}
